<template>
	<view class="j_cont">
		<view class="j_form">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="password">
					<u-input v-model="form.password" placeholder="请输入新密码" />
				</u-form-item>
				<u-form-item prop="newPassword">
					<u-input v-model="form.newPassword" placeholder='请确定新密码' />
				</u-form-item>
			</u-form>

		</view>
		<button @click="submit()" class="j_button">提交</button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					password: '',
					newPassword: '',
					list: []
				},
				rules: {
					password: [{
						required: true,
						min: 6,
						max: 12,
						message: '请输入6-12位数密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					newPassword: [{
						min: 6,
						max: 12,
						message: '再次输入密码',
						trigger: 'change'
					}]
				}
			}
		},
		methods: {
			submit() {

				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.form.password == this.form.newPassword) {
							this.$api.nameupMsg({
								id: this.list.id,
								password: this.form.password
							}).then(res => {
								this.form.password = '',
								this.form.newPassword = ''
							})
							this.$refs.uToast.show({
								title: '修改成功',
								type: 'success',
								url: '/pages/login/login'
							})
						}
					} else {
						console.log('验证失败');
					}
				});
			}
		},

		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			this.$api.LogingetMsg().then(res => {
				this.list = res.data
			})
		}
	}
</script>

<style lang="scss" scoped>
	//背景
	.j_cont {
		width: 100%;
		height: 94vh;
		background: #F2F2F2;
		padding: 20upx;
		padding-top: 40upx;
	}

	.j_form {
		padding: 0 20upx;
		box-sizing: border-box;
		background: white;
	}

	.j_button {
		width: 100%;
		height: 80upx;
		background: #FFD79D;
		margin-top: 20upx;

	}
</style>
